<template>
	<view class="wrap">
		<view class="">
			<view class="title"><text>确定约球信息</text></view>
			<view class="bg">

				<view class="group">
					<view class="lab">开球时间:</view>
					<view class="inp_box"><input :value="formtStartBall()" type="text" disabled /></view>
				</view>

				<view class="group">
					<view class="lab">约球场地:</view>
					<view class="inp_box"><input :value="ballInfo.ShopName" type="text" disabled /></view>
				</view>
			</view>
		</view>

		<view class="join_btn flx flx_align_center flx_justify_center">
			<view class="btn" @click="sub">确定约球</view>
		</view>


		<uni-popup ref="dialog" type="center">
			<view class="dialog">
				<view class="dialog-title"> 附赠约球礼物 </view>
				<view class="dialog-content">
					<input type="number" v-model="customReward" placeholder="请输入数量">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_bbt.png" mode=""></image>
				</view>
				<view class="dialog-footer">
					<view v-if="userInfo.IsFee" class="btn-cancel" @click="cancalSetReward"> 取消 </view>
					<view v-if="!userInfo.IsFee" class="btn-cancel" @click="freeConfirmReward"> 直接约球 </view>
					<view :disabled="customReward" class="btn-comfirm" @click="confirmSetReward()"> 确定 </view>
				</view>
				<view v-if="userInfo.IsFee" class="dialog-tip">
					对方已设置约球费用 {{ userInfo.PlayFee }}
				</view>
				<view v-if="!userInfo.IsFee" class="dialog-tip">
					对方没有设置约球费用则可直接约球
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customReward: '',
				ballInfo: {},
				userInfo: {}
			};
		},
		async onLoad(e) {
			if (e.params) {
				const params = JSON.parse(e.params)
				this.ballInfo = { ...params.ballInfo }
				this.userInfo = { ...params.userInfo }
				this.getFee()
				// this.userInfo.IsFee = 1
				// this.userInfo.PlayFee = 2000
			}
		},
		methods: {
			async getFee() {
				let res = await this.$api.post('/Team/GetMemberCommission', { UserID: this.userInfo.ID });
				if (res.data) {
					this.userInfo.PlayFee = res.data
				}
			},
			openMsg() {
				// #ifdef MP-WEIXIN
				return new Promise((r, j) => {
					wx.requestSubscribeMessage({
						tmplIds: [
							'JjAGfFcjOyiJciTpc6noLLspC7JEet2Gb1Pt3iWh55Y',
							'GJbLgiFQTdYnKSuqPCNtMA-ADkxwONj756WXrUebPdM'
						],
						success(res) {
							r(res);
						},
						fail(err) {
							j(res);
						}
					});
				});
				// #endif
				// #ifdef APP
				return true
				// #endif
			},
			getTime2(l) {
				let d = new Date(l);
				let timestamp = d.getTime();
				return this.$u.date(timestamp, 'mm-dd');
			},
			getWeek(l) {
				let d = new Date(l);
				let week = d.getDay();
				let weelStr =
					week == 0 ?
					'星期天' :
					week == 1 ?
					'星期一' :
					week == 2 ?
					'星期二' :
					week == 3 ?
					'星期三' :
					week == 4 ?
					'星期四' :
					week == 5 ?
					'星期五' :
					'星期六';
				return weelStr;
			},
			formtStartBall() {
				return `${this.getTime2(this.ballInfo.ServerDate)} ${this.getWeek(
				this.ballInfo.ServerDate
			)} ${this.ballInfo.ServerTime}`;
			},
			async sub() {

				if (this.userInfo.IsFee == 1) {
					this.customReward = this.userInfo.PlayFee
				} else {
					this.customReward = 1000
				}

				this.$refs['dialog'].open()
			},

			cancalSetReward() {
				this.customReward = ''
				this.$refs['dialog'].close()
			},

			async freeConfirmReward() {
				this.customReward = 0

				const res = await this.subData()

				if (res.data) {
					this.$pv.msg('约球成功, 等待对方确认', 2000)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/ball/ball_list_user'
						})
					}, 1000)
				} else {
					this.$pv.msg(res.message)
				}

				this.$refs.dialog.close()

			},

			async confirmSetReward() {
				if (!this.customReward) {
					this.$pv.msg('请输入礼物数量')
					this.customReward = ''
					return
				}
				if (isNaN(Number(this.customReward))) {
					this.$pv.msg('请输入数字')
					this.customReward = ''
					return
				}
				if (Number(this.customReward).toString().indexOf('.') > 0) {
					this.$pv.msg('请输入整数')
					this.customReward = ''
					return
				}

				if (this.userInfo.IsFee && this.customReward < this.userInfo.PlayFee) {
					this.$pv.msg(`数量最少${this.userInfo.PlayFee}`)
					this.customReward = this.userInfo.PlayFee
					return
				}

				const subRes = await this.subData()

				if (!subRes.data) {
					this.$pv.msg(subRes.message, 2000);
					return;
				}

				if (subRes.data.AppointmentID) {
					let pres = await this.$api.post('/Payment/PayV2', {
						EventID: subRes.data.AppointmentID,
						CompanyID: 6002,
						total_fee: this.customReward,
						body: '约球',
						EventType: '约球',
						SourcePage:'ball_invite_confirm',
						// #ifdef MP-WEIXIN
						PayChannel: "weixin",
						// #endif
						// #ifdef APP
						PayChannel: "app"
						// #endif
					});
					let payObj = JSON.parse(pres.data);

					uni.requestPayment({
						provider: 'wxpay',
						// #ifdef APP
						orderInfo: payObj,
						// #endif
						// #ifdef MP-WEIXIN
						timeStamp: payObj.timeStamp,
						nonceStr: payObj.nonceStr,
						package: payObj.package,
						signType: payObj.signType,
						paySign: payObj.paySign,
						// #endif
						success: async (r) => {
							this.$pv.msg('支付成功, 约球成功');
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/ball/ball_list_user'
								})
							}, 1000)
						},
						fail: (err) => {
							this.$pv.msg('支付失败');
						}
					});
				}

				this.$refs['dialog'].close()
			},

			async subData() {
				this.$pv.load('正在处理')
				let obj = {
					UserID: uni.getStorageSync('user').UserID,
					Price: this.customReward || 0
				};
				let invite = {
					UserID: this.userInfo.ID,
					Price: this.customReward || 0
				};

				let arr = [obj, invite];

				// return false;

				const reqData = {
					ShopID: this.ballInfo.ShopID,
					Remark: '',
					Price: '',
					ServerDate: this.ballInfo.ServerDate,
					ServerTime: this.ballInfo.ServerTime,
					IsPayRegisterFee: 0,
					RegisterFee: this.ballInfo.RegisterFee,
					ItemStr: '',
					FeeRule: '组局者承担',
					PeopleNum: 2,
					IsOpen: 1,
					Title: '预约球局',
					WomenNum: 0,
					City: this.ballInfo.City,
					AppointmentType: '私人球局',
					Longitude: this.ballInfo.Longitude,
					Latitude: this.ballInfo.Latitude,
					Place: this.ballInfo.Place
				}

				reqData.ItemStr = JSON.stringify(arr)
				let res = await this.$api.post('Appointment/Apply', reqData)
				return res;
			}
		}
	};
</script>

<style lang="scss">
	page,
	.wrap {
		height: 100%;
	}

	.wrap {
		position: relative;


		.join_btn {
			position: absolute;
			width: 100%;
			bottom: 48rpx;
			flex-wrap: wrap;

			>.btn {
				width: 92%;
				margin-bottom: 8rpx;
			}
		}
	}

	.title {
		padding: 20rpx 0 10rpx;
		margin-left: 30rpx;
		font-size: 44rpx;
		line-height: 60rpx;
	}

	.bg {
		margin-top: 20rpx;
		// background: #202020;
		border-radius: 16rpx;
	}

	.group {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #eee;
		margin-left: 30rpx;
		margin-right: 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333;
			font-size: 32rpx;
		}

		.goTime {
			color: white;
		}

		.inp_box {
			flex: 1;

			input {
				width: 100%;
				text-align: right;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.tip {
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #dcc188;
	}

	.dialog {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;

		.dialog-title {
			text-align: center;
			color: #000;
			padding-top: 40rpx;
		}

		.dialog-desc {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.dialog-content {
			font-size: 34rpx;
			display: flex;
			align-items: center;
			padding: 32rpx 44rpx;

			input {
				flex: 1;
				height: 72rpx;
				border-bottom: 1rpx solid #efe8e8;
				color: #000;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.dialog-footer {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #B98B51
			}

			.btn-comfirm {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #FEF0BC;
			}
		}

		.dialog-tip {
			text-align: center;
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}
</style>